---
id: colors
title: Colors
---

import './colors.styles.css';

<div class="col padding-bottom--none">
  <div class="row margin-bottom--md">
    <div class="col col--3">
      <span class="text--bold">Primary</span>
    </div>
    <div class="col">
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-primary-lightest)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-primary-lighter)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-primary-light)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-primary)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-primary-dark)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-primary-darker)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-primary-darkest)'}}></div>
    </div>
  </div>
  <div class="row margin-bottom--md">
    <div class="col col--3">
      <span class="text--bold">Secondary</span>
    </div>
    <div class="col">
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-secondary-lightest)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-secondary-lighter)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-secondary-light)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-secondary)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-secondary-dark)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-secondary-darker)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-secondary-darkest)'}}></div>
    </div>
  </div>
  <div class="row margin-bottom--md">
    <div class="col col--3">
      <span class="text--bold">Success</span>
    </div>
    <div class="col">
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-success-lightest)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-success-lighter)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-success-light)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-success)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-success-dark)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-success-darker)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-success-darkest)'}}></div>
    </div>
  </div>
</div>
<div class="col">
  <div class="row margin-bottom--md">
    <div class="col col--3">
      <span class="text--bold">Info</span>
    </div>
    <div class="col">
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-info-lightest)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-info-lighter)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-info-light)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-info)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-info-dark)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-info-darker)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-info-darkest)'}}></div>
    </div>
  </div>
  <div class="row margin-bottom--md">
    <div class="col col--3">
      <span class="text--bold">Warning</span>
    </div>
    <div class="col">
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-warning-lightest)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-warning-lighter)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-warning-light)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-warning)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-warning-dark)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-warning-darker)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-warning-darkest)'}}></div>
    </div>
  </div>
  <div class="row margin-bottom--md">
    <div class="col col--3">
      <span class="text--bold">Danger</span>
    </div>
    <div class="col">
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-danger-lightest)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-danger-lighter)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-danger-light)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-danger)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-danger-dark)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-danger-darker)'}}></div>
      <div
        class="color"
        style={{backgroundColor: 'var(--ifm-color-danger-darkest)'}}></div>
    </div>
  </div>
</div>
